<template>
    <a-card :bordered="false">
        <!-- 表头 -->
        <div class="table-header">
            <!-- 查询条件 -->
            <a-form layout="inline" class="basic-form" :form="queryForm" >
                <!-- 当前页码 -->
                <a-form-item style="display: none">
                    <a-input type="hidden" v-decorator="[ 'current' ]" />
                </a-form-item>
                <!-- 每页显示条数 -->
                <a-form-item style="display: none">
                    <a-input type="hidden" v-decorator="[ 'size' ]" />
                </a-form-item>
                <!-- 升序字段 -->
                <a-form-item style="display: none">
                    <a-input type="hidden" v-decorator="[ 'ascs' ]" />
                </a-form-item>
                <!-- 降序字段 -->
                <a-form-item style="display: none">
                    <a-input type="hidden" v-decorator="[ 'descs' ]" />
                </a-form-item>
                <!-- 其他查询条件 -->
                <slot name="queryFormItem" />
            </a-form>
            <!-- 表头操作按钮 -->
            <div class="operators">
                <slot name="headerOperators" />
            </div>
        </div>
        <!-- 表格内容 -->
        <div class="table-content">
            <!-- 勾选表格数据监控 -->
            <div class="table-alert" v-if="rowSelection && rowSelection.selectedRowKeys">
                <a-alert type="info" :show-icon="true">
                    <template slot="message">
                        <span>已选择&nbsp;</span>
                        <a style="font-weight: 600;">{{ rowSelection.selectedRowKeys.length }}</a>
                        <span>&nbsp;项</span>
                        <a style="margin-left: 24px;" @click="() => rowSelection.selectedRowKeys.splice(0,rowSelection.selectedRowKeys.length)">清空</a>
                    </template>
                </a-alert>
            </div>
            <!-- 数据表格 -->
            <a-table
                size="middle"
                :dataSource = "dataList"
                :pagination = "pagination"
                :row-key = "rowKey"
                :row-selection = "rowSelection"
                @change = "handleTableChange"
            >
                <!-- 列 -->
                <slot name="tableColumns" />
            </a-table>
        </div>
        <!-- 其他 -->
        <slot />
    </a-card>
</template>

<script>
    export default {
        props : {
            //  接口信息
            api : { type : Function },
            //  每行的唯一标识,默认是Id
            rowKey : { type : Function, default : record => record.id },
            //  列表项是否可选择
            rowSelection : { type : Object, default : () => undefined }
        },
        data(){
            return {
                //  查询表单
                queryForm : this.$form.createForm(this),
                //  表格数据
                dataList : [],
                //  分页对象
                pagination : {
                    showSizeChanger : true, //  是否可以改变 pageSize
                    showQuickJumper : true  //  是否可以快速跳转至某页
                }
            };
        },
        mounted(){
            if (this.api){
                this.handleTableQuery(this.$route.query);
            }
        },
        watch: {
            // 如果路由有变化，会再次执行该方法
            '$route' : function (route) {
                //  刷新表格
                if (route.query && this.api){
                    this.handleTableQuery(route.query);
                }
            }
        },
        methods : {
            /**
             * 处理表格发生变化
             * @param pagination 分页条件
             * @param filters 对某一列数据进行筛选，使用列的 filters 属性来指定需要筛选的列
             * @param sorter 对某一列数据进行排序，通过指定列的 sorter 函数即可启动排序按钮
             */
            handleTableChange : function (pagination,filters,sorter) {
                let params = {
                    //  当前页
                    'current' : pagination.current ? pagination.current : 1,
                    //  每页显示条数
                    'size' : pagination.pageSize ? pagination.pageSize : 10
                };
                //  设置升序或降序
                if (sorter.columnKey){
                    if (sorter.order === 'ascend'){
                        params['ascs'] = sorter.columnKey;
                        params['descs'] = '';
                    } else {
                        params['ascs'] = '';
                        params['descs'] = sorter.columnKey;
                    }
                }
                this.queryForm.setFieldsValue(params);
                this.handleTableQuery(this.$route.query);
            },
            /**
             * 查询表格数据
             * @param params
             */
            handleTableQuery : function (params) {
                let $this = this;
                //  获取查询条件
                let queryParams = this.queryForm.getFieldsValue();
                //  合并两个JSON
                const parameters = Object.assign({},params,queryParams);
                //  查询数据
                this.api(parameters)
                    .then(result => {
                        $this.dataList = result.data['records'];
                        const pagination = { ...$this.pagination };
                        pagination.current = parseInt(result.data['current']);
                        pagination.pageSize = parseInt(result.data['size']);
                        pagination.total = parseInt(result.data['total']);
                        $this.pagination = pagination;
                    });
            },
        }
    }
</script>

<style lang="less">
    @import "./style";
</style>
